<template>
	<view class="pageBg">
		<view class="margin_b64"><fr-simple-clock :miniSize="false"></fr-simple-clock></view>
		<view class="cnt">
			<block v-for="(item, index) in funcList" :key="item.id">
				<view v-if="item.status !== 0" class="listItem flex_r_sb_c" @click.stop="handleClick(item)">
					<view class="itemLeft flex_c_c_fs">
						<text class="f_32 fw_600 tc_1 margin_b4">{{item.title}}</text>
						<text class="f_24 fw_400 tc_8 text_line_1" style="width:500rpx;">{{item.desc}}</text>
					</view>
					<view class="itemRight flex_r_c_c">
						<view v-if="item.status === 2" class="itemRightTag f_20 fw_500 tc_w flex_r_c_c">测试中</view>
						<text class="iconfont iconrightArrow f_40"></text>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// status  0 => 停止使用, 1 => 正常使用, 2 => 测试中
				funcList: [
					{id: '01', title: '农历运势', desc: '查看当日农历运势详情', status: 1, url: '/pages/func/lunarCalendar/lunarCalendar'},
					
					{id: '02', title: '密码输入框&安全键盘', desc: '仿微信支付密码框&安全键盘&支付方式选择', status: 1, url: '/pages/func/safeKeyPwd/safeKeyPwd'},
					{id: '03', title: '星座查询', desc: '星座查询&幸运色&幸运宝石&星座特质', status: 1, url: '/pages/func/horoscope/horoscope'},
					// {id: '04', title: '新闻头条', desc: '头条, 国内, 娱乐, 体育, 军事, 科技等新闻信息', status: 1, url: '/pages/func/news/news'},
					// {id: '05', title: '全国降雨预报图', desc: '处理当后台将图片以文件流格式返回的情况', status: 2, url: '/pages/func/rainfall/rainfall'},
					{id: '06', title: '每日壁纸', desc: '精美壁纸每日推选(流量较大, 谨慎进入!)', status: 1, url: '/pages/func/dailyPic/dailyPic'},
					{id: '07', title: '汽车品牌大全', desc: '首字母索引的汽车品牌列表', status: 1, url: '/pages/func/carsBrandList/carsBrandList'},
					{id: '08', title: 'TODO', desc: '可拖拽排序的TODO列表', status: 1, url: '/pages/func/todoList/todoList'},
				],
			};
		},
		methods: {
			handleClick(e) {
				if(process.env.NODE_ENV === 'development') {
					// 开发环境
					this.$tool.go(e.url)
				} else if(process.env.NODE_ENV === 'production') {
					// 生产环境
					e.status === 1? this.$tool.go(e.url) : this.$tool.msg('测试中...')
				}
			},
		},
	}
</script>

<style lang="scss">
page {
	background-color: #253b55;
	height: 100%;
}
</style>
<style lang="scss" scoped>
.pageBg {
	padding: 28rpx;
	box-sizing: border-box;
	.cnt {
		// padding: 0 28rpx;
		// box-sizing: border-box;
		margin-bottom: 108rpx;
		.listItem {
			width: 100%;
			height: 120rpx;
			background: rgba(255, 255, 255, 0.8);
			border-radius: 16rpx;
			margin-bottom: 16rpx;
			padding: 0 28rpx;
			box-sizing: border-box;
			.itemRight {
				.itemRightTag {
					height: 36rpx;
					padding: 0 12rpx;
					box-sizing: border-box;
					background: #ED4C4C;
					border-radius: 8rpx;
				}
			}
		}
	}
}
</style>
